<!--
  @Descripttion：楼层编辑基础表单
  @Author：zqy
  @Date：2020-08-01 15:58:45
  @Last Modified by：zqy
  @Last Modified time：2020-08-01 15:58:45
-->
<template>
  <div class="basic-form">
    <el-form ref="refForm" :rules="formRules" :model="formData" size="mini" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="楼层名称:" prop="storeyName">
            <el-input v-model.trim="formData.storeyName" placeholder="请输入楼层名称" maxlength="10" show-word-limit />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="楼层布局:">
            <div class="floor-layout">
              <img :src="layoutImage" style="width:177px">
              <div v-if="layoutData.type!=='content'&& layoutData.maxCount>0" class="alert-msg">
                最多新增{{ layoutData.maxCount }}个{{ layoutData.type==='fastlink'?'快速入口':'常见问题' }}，入口按序号排序进行显示。
              </div>
            </div>
          </el-form-item>
        </el-col>
        <el-col v-show="layoutData.type==='content'" :span="12">
          <el-form-item
            label="更多链接:"
            prop="categoryIdPath"
            :rules="[
              { required: layoutData.type==='content', message: '请选择', trigger: 'change' }
            ]"
          >
            <el-cascader
              v-model="formData.categoryIdPath"
              placeholder="请选择类目"
              :options="categoryData"
              filterable
              :props="{
                checkStrictly: false,
                value:'id',
                label:'categoryName',
                children:'childrenCategorys'
              }"
              style="width:100%"
            />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'FloorBasicEditForm',
  props: {
    categoryData: {
      type: Array,
      default: () => []
    }, // 类目树
    floorData: {
      type: [String, Object],
      default: ''
    },
    floorType: {
      type: String,
      default: ''
    }, // 楼层类型：content  内容楼层 ， fastlink 快速入口楼层 ， question 常见问题楼层
    layoutData: {
      type: [String, Object],
      default: ''
    } // 当前所选中的楼层布局
  },
  data() {
    return {
      formData: {
        storeyName: '', // 楼层名称
        categoryIdPath: []
      },
      formRules: {
        storeyName: [
          { required: true, message: '请输入楼层名称', trigger: 'change' }
        ]
      }
    }
  },

  computed: {
    layoutImage() {
      if (this.layoutData && this.layoutData.image) {
        return require('../images/' + this.layoutData.image)
      }
      return ''
    }
  },
  watch: {
    floorData: {
      handler(val, oldVal) {
        this.setFormData(val)
      },
      immediate: true,
      deep: true
    }
  },
  created() {

  },

  methods: {
    setFormData(data) {
      const categoryIdPath = data.fullIdPath && data.fullIdPath.length > 0 ? data.fullIdPath.split('/') : []
      this.formData = {
        storeyName: data.storeyName || '', // 楼层名称
        categoryIdPath
      }
    },
    /**
     * 验证当前表单数据
     * @returns {Boolean} 是否通过验证：true 通过，false 未通过
     * */
    async validateForm() {
      return new Promise((resolve, reject) => {
        this.$refs['refForm'].validate((valid) => {
          if (valid) {
            const formData = JSON.parse(JSON.stringify(this.formData))
            resolve(formData)
          } else {
            reject()
          }
        })
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.floor-layout{
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    .alert-msg{
      margin-left: 10px;
      color: #999;
    }
}
</style>
